<template>
  <div>
    <x-header :left-options="{backText: ''}"  @on-click-more="showMenus = true" >创建题目</x-header>
    <div class="ui-body" id="uploadImg">
      <group gutter="0">
        <group gutter="0">
          <x-input v-model="question" title="投票标题：" placeholder="投票标题"></x-input>
        </group>
        <group gutter="0" v-if="$route.params.type === 'more'">
          <x-input v-model="MaxSelected" title="最多选择项：" placeholder="最多选择项(0为不限制选择)" type="number"></x-input>
        </group>
        <div class="ui-answer-img" style="margin: 0 auto;width: 124px;overflow: hidden;display: none;">
          <input type="file" accept="image/*" @click="changeImg('file-1', index, 0)"/>
          <img v-if="questionImg" :src="questionImg" style="width: 100%">
        </div>
      </group>
      <group title="添加答案">
        <ul>
          <group gutter="0"><i class="ui-add-question" @click="addAnswer(0)"></i></group>
          <li class="ui-answer-list" v-for="(item, index) in answerList">
            <group gutter="0">
              <x-input :title="(parseInt(index / 26) === 0 ? $store.state.letterList[index] : $store.state.letterList[parseInt(index % 26)] + parseInt(index / 26)) + '.'" v-model="item.title" placeholder="请输入选项标题" class="ui-question-input">
              </x-input>
              <i class="ui-delete-this" @click="deleteAnswer(index)"></i>
            </group>
            <div class="ui-answer-img-list">
              <div class="ui-answer-img">
                <input type="file" accept="image/*" @click="changeImg('file0' + index, index, 0)"/>
                <img v-if="item.img[0]" :src="item.img[0]" style="width: 100%">
              </div>
              <div class="ui-answer-img">
                <input type="file" accept="image/*" @click="changeImg('file1' + index, index, 1)"/>
                <img v-if="item.img[1]" :src="item.img[1]" style="width: 100%">
              </div>
              <div class="ui-answer-img">
                <input type="file" accept="image/*" @click="changeImg('file2' + index, index, 2)"/>
                <img v-if="item.img[2]" :src="item.img[2]" style="width: 100%">
              </div>
              <div class="ui-answer-img">
                <input type="file" accept="image/*" @click="changeImg('file3' + index, index, 3)"/>
                <img v-if="item.img[3]" :src="item.img[3]" style="width: 100%">
              </div>
            </div>
            <group gutter="0"><i class="ui-add-question" @click="addAnswer(index + 1)"></i></group>
          </li>
        </ul>
      </group>
      <box gap="10px 10px">
        <flexbox>
          <flexbox-item>
            <x-button type="primary" @click.native="complete" style="margin-top: 40px;">完成</x-button>
          </flexbox-item>
          <flexbox-item v-if="edit"> 
            <x-button  type="warn" @click.native="deteleThis" style="margin-top: 40px;">删除</x-button>
          </flexbox-item>
        </flexbox>
      </box>
    </div>
  </div>
</template>

<script>
import { Group, Cell, XInput, XButton, Box, Flexbox, FlexboxItem, XHeader } from 'vux'
import store from '@/store'
import axios from 'axios'
import weui from '../../static/weui.min.js'
require('es6-promise').polyfill()
var qs = require('qs')

export default {
  store,
  components: {
    Group,
    Cell,
    XInput,
    XButton,
    Box,
    Flexbox,
    FlexboxItem,
    XHeader
  },
  data () {
    return {
      answerList: [],
      question: '',
      questionImg: '',
      edit: false,
      id: '',
      index: '',
      imgIndex: '',
      MaxSelected: '0'
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.edit = to.params.edit
      if (vm.edit) {
        vm.answerList = vm.$store.state.questionList[to.params.index].answerList
        vm.question = vm.$store.state.questionList[to.params.index].question
        vm.MaxSelected = vm.$store.state.questionList[to.params.index].MaxSelected
        vm.questionImg = vm.$store.state.questionList[to.params.index].questionImg
      } else {
        vm.questionImg = ''
        vm.answerList = []
        vm.question = ''
      }
    })
  },
  mounted () {
    setTimeout(() => {
      this.initUpload()
    }, 50)
  },
  methods: {
    initUpload () {
      let _this = this
      weui.uploader('#uploadImg', {
        url: _this.$store.state.url + '/VoteManage/VoteImageUpload.ashx',
        auto: true,
        type: 'base64',
        fileVal: 'uploadImg',
        compress: {
          quality: 0.5
        },
        onBeforeQueued: function (files) {
          _this.$vux.loading.show({
            text: '上传中...'
          })
          if (['image/jpg', 'image/jpeg', 'image/png', 'image/gif'].indexOf(this.type) < 0) {
            _this.$vux.toast.text('请上传图片', 'bottom')
            _this.$vux.loading.hide()
            return false
          }
        },
        onQueued: function () {
          _this.upLoadImg(this.base64)
        },
        onBeforeSend: function (data, headers) {
          return false // 阻止文件上传
        }
      })
    },
    upLoadImg (Base64) {
      let _this = this
      axios.post(this.$store.state.url + '/VoteManage/VoteImageUpload.ashx', qs.stringify({Base64: Base64}))
      .then((rs) => {
        let data = rs.data
        if (data.code === 200) {
          if (_this.id === 'file-1') {
            _this.questionImg = _this.$store.state.imgUrl + data.url
          } else {
            var answer = _this.answerList[_this.index]
            if (!answer.img) {
              answer.img = ['', '', '', '']
            }
            answer.img.splice(_this.imgIndex, 1, _this.$store.state.imgUrl + data.url)
            _this.answerList.splice(_this.index, 1, answer)
          }
        } else {
          _this.$vux.toast.text(data.msg, 'bottom')
        }
        _this.$vux.loading.hide()
      })
      .catch((response) => {
        this.$vux.toast.text('请求失败请稍后再试', 'bottom')
      })
    },
    changeImg (id, index, imgIndex) {
      this.id = id
      this.index = index
      this.imgIndex = imgIndex
    },
    addAnswer (index) {
      this.answerList.splice(index, 0, {answer: '', img: '', title: ''})
      setTimeout(() => {
        this.initUpload()
      }, 1)
    },
    deleteAnswer (index) {
      this.answerList.splice(index, 1)
    },
    deteleThis () {
      this.$store.state.questionList.splice(this.$route.params.index, 1)
      this.$router.go(-1)
    },
    complete () {
      if (!this.question) {
        this.$vux.toast.text('请填写投票标题', 'bottom')
        return
      }
      for (let index in this.answerList) {
        let item = this.answerList[index]
        if (!item.title) {
          this.$vux.toast.text('请完整' + (parseInt(index / 26) === 0 ? this.$store.state.letterList[index] : this.$store.state.letterList[index % 26] + parseInt(index / 26)) + '答案', 'bottom')
          return
        }
      }
      let questionList = this.$store.state.questionList
      let type = this.$route.params.type || questionList[this.$route.params.index].type
      if (type === 'more') {
        if (this.MaxSelected < 0 || this.MaxSelected > this.answerList.length) {
          this.$vux.toast.text('最多选择项为0-' + this.answerList.length + '之间的整数', 'bottom')
          return
        }
      }
      questionList.splice(this.$route.params.index, this.edit ? 1 : 0, {type: type, MaxSelected: this.MaxSelected, answerList: this.answerList, question: this.question, questionImg: this.questionImg})
      this.$store.commit('updateState', {key: 'questionList', value: questionList})
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped src='@/assets/css/question.css'></style>
